<template>
	<view class="page" @touchmove.stop.prevent="moveHandle">
		<view class="contact-wrap">

			<view class="contact">联系客服</view>
			<view class="hmain00">
				<view class="tel">客服电话：<text class="tel1">{{getinfo.phone}}</text></view>
				<view class="call" @click="getPhone(getinfo.phone)">立即拨打</view>
			</view>
			<view class="hmain00">
				<view class="wechat">官方微信：<text class="tel1">{{getinfo.wechat}}</text></view>
				<view class="copy-wechat call" @click="getWx(getinfo.wechat)">复制</view>
			</view>

			<view class="hmain00">
				<view class="qq">官方 QQ：<text class="tel1">{{getinfo.qq}}</text></view>
				<view class="copy-qq call" @click="getQQ(getinfo.qq)">复制</view>
			</view>

			<view class="close" @click="close">
				<text>关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created: function(options) {
			console.log(options,'走了');
			//调用需要的方法 
			this.getMinePhone();
		},
		//先赋值一个变量 否则 不好使
		data() {
			return {
				getinfo: [],
			}
		},
		methods: {
			// 获取获取客服信息
			getMinePhone() {
				this.$api.getMinePhone().then(res => {
					this.getinfo = res.data.data;
					console.log(this.getinfo);

				})
			},
			// 获取获取客服信息
			getPhone(value) {
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			// 复制微信
			getWx(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						// uni.hideToast();
						//以下就可自定义操作了~
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			// 复制QQ
			getQQ(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						// uni.hideToast();
						//以下就可自定义操作了~
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},

			moveHandle() {
				return;
			},
			close() {
				this.$emit("gotourl");
			}
		}
	}
</script>

<style>
	.page {
		position: fixed;
		top: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contact-wrap {
		width: 550rpx;
		height: 640rpx;
		background: rgba(255, 255, 255, 1);
		overflow: auto;
		border-radius: 15rpx;
		float: left;
		padding: 0px 40rpx 0px;
	}

	.contact {
		width: 100%;
		height: 20px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
		float: left;
		margin-top: 16px;
	}

	.contact-us {
		display: block;
		width: 134rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.hmain00 {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.tel {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		float: left;
	}

	.tel1 {
		color: #999999;
	}

	.call {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254, 177, 71, 1);
		margin-left: auto;
		margin-top: -2px;
	}

	.wechat-wrap {
		display: flex;
		justify-content: space-between;
		width: 570rpx;
		margin: 0 auto;
		margin-top: 60rpx;
	}

	.wechat {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.copy {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254, 177, 71, 1);
	}

	.qq-wrap {
		display: flex;
		justify-content: space-between;
		width: 570rpx;
		margin: auto;
		margin-top: 60rpx;
	}

	.qq {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.close {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 320rpx;
		height: 64rpx;
		background: #FEB147;
		margin: auto;
		margin-top:100rpx;
		float:left;
		margin-left:115rpx;
		border-radius:4px;
	}

	.close text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
</style>
